<template>
  <view class="header-user">
    <!-- 左侧头像区域 -->
    <view class="user-avater">
      <image :src="userinfo.avater" class="avater"></image>
    </view>
    <!-- 右侧信息区域 -->
    <view class="user-msg">
      <view class="name-tag">
        <text class="name">{{ userinfo.name }}</text>
        <view class="tag">{{ userinfo.tag }}</view>
      </view>
      <view class="expire-time common">
        <view class="left">到期时间：</view>
        <view class="right">{{ userinfo.outTime }}</view>
      </view>
      <view class="vip-id common">
        <view class="left">会员证号：</view>
        <view class="right">{{ userinfo.vipId }}</view>
      </view>
      <view class="organ common">
        <view class="left">所属机构：</view>
        <view class="right">{{ userinfo.organ }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-user",
    data() {
      return {

      };
    },
    props: {
      // 用户信息区域
      userinfo: {
        type: Object,
        default: {}
      }
    }
  }
</script>

<style lang="scss">
  // 个人信息区域
  .header-user {
    padding: 46rpx 50rpx 31rpx 0rpx;
    display: flex;

    // 左侧头像区域
    .user-avater {
      margin-right: 32rpx;

      .avater {
        width: 160rpx;
        height: 160rpx;
        border-radius: 80rpx;
        background-color: #e3e3e3;
      }
    }

    // 右侧信息区域
    .user-msg {
      color: #868D93;
      font-size: 28rpx;

      // 公共flex样式
      .common {
        display: flex;
        margin-bottom: 10rpx;

        .left {
          width: 140rpx;
          white-space: nowrap;
        }
      }
      
      .name-tag {
        display: flex;
        align-items: center;
        margin-bottom: 26rpx;

        .name {
          color: #171717;
          font-size: 36rpx;
          margin-right: 18rpx;
          font-weight: 600;
        }

        .tag {
          width: 115rpx;
          height: 37rpx;
          background-image: linear-gradient(to right, #FFE8C9, #F5D2A3);
          color: #A76C1D;
          text-align: center;
          line-height: 37rpx;
          font-size: 24rpx;
        }
      }
    }
  }
</style>
